how to fix "Access to XMLHttpRequest at 'http://localhost:7071/api/' from origin 'http://localhost:3000' has been blocked by CORS policy" in Azure Serverless implementation?

when i implemented the Web API using Azure functions in Azure Serverless development. i try to run the Azure fucntion in the localhost from visual studio code. the error came up immdiately after i test the create function.

"Access to XMLHttpRequest at 'http://localhost:7071/api/createSpeaker/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource."

the error message clearly indicated that it was a CORS issue. which is the web app hosts on port 3000 and tries to access the web API hosts on port 7071.

according to the microsoft document. it suggested that we should add the following configuration to the local.settings.json file which is the configure file for azure functions running in local mode.

https://docs.microsoft.com/en-us/azure/azure-functions/functions-run-local?tabs=windows%2Ccsharp%2Cbash

"Host": {
    "LocalHttpPort": 7071,
    "CORS": "*",
    "CORSCredentials": false
  },

however the above never works for me. acutally the following command line did fix the issue

func host start --cors *

Happy programming and enjoy the fun

How to comment out multi-line in Windows Powershell?

if we want to comment out multiple line in the Powershell ISE. there is a shotcut to do so.

comment out multi-line:

use "ALT + SHIFT" to move down to the end of the last line that you want to comment out,

then use "SHIFT + #" to add # to all lines being selected.

 uncomment multi-line:

use "ALT + SHIFT" to move down to the end of the last line that you want to uncomment,

then press Delete button to undo all the comment out code.

having more fun with PowerShell !

Handy Command for GitHub

i just organized a list of GitHub command, i hope this will help you speed up the GitHub adaption


-git init : create repository
-git status: Compare working directory, staging area and current branch
-git add: add changes to staging area
-git commit: Commit changes from staging to current branch
-git log: show history of project commits
-git branch -c : Create a new branch1
-git checkout: check out switch to a branch
-git branch: List branches
-git checkout: check out a branch (update HEAD)
-git checkout -b: Create branch, then check it out
-git stash: Stash changes from working directory
-git stash list: List stashes
-git stash pop: apply stashed changes to working directory.
-git branch -v: list latest version of changes in each branch
-git branch -d: delete a branch
-git -am: git add commit within one line
-git merge: Merge changes from different branches


- git log: Show history of project commit
- git log <ref>: show history of pro commit prior to <ref>
- git log -all: show all commits
- git log --author <string> : show commits with matching author
- git log --since <date>: show commits since date
- git log --until <date>: show commits prior to date
- git show: show a single commit
- git diff: show the difference between commits, working directory and the staging area.
- git diff <commit> show diff between working direct and commit.
- git diff <commitA>..<commitB>: Diff between commit
- git diff <refA>..<refB>: Diff between ref(branches, et, al.)
- git log --oneline: show one commit per line
- git log --graph: show graph view of commits
- git show <commit>: show difference introduced by commit

- git diff --cached: Diff between staging area and HEAD

- git remote add : Add a new at
- git remote -v: List remote repositories
- git push -u : Push to , and set default upstream for
- git fetch: Fetch changes from remote repository
- git pull: Fetch, and then merge



git merge: merge changes from different branches
git merge --abort: abort an in process merge
git log branch1..branch2: log of commit in branch2 but not in branch1
git log branch1...branch2: log of commit in either branch but not both.
git merge --no-commit no-off: attempt to merge, but od not create an auto merge or ff merge
git branch --no-merged branch1: List branches that have unmerged commits
git branch --merged branch1: list branches that have no unmerged commits

C# Features from 1.0 to 9.0

here is a summary list of C# feature from 1.0 to 8.0

Version 1.0

• Classes
• Structs
• Interfaces
• Events
• Properties
• Delegates
• Expressions
• Statements
• Attributes

Version 2.0

• Generics
• Partial types
• Anonymous methods
• Nullable value types
• Iterators
• Covariance and contravariance

Version 3.0

• Auto-implemented properties
• Anonymous types
• Query expressions
• Lambda expressions
• Expression trees
• Extension methods
• Implicitly typed local variables
• Partial methods
• Object and collection initializers

version 4.0

• Dynamic binding
• Named/optional arguments
• Generic covariant and contravariant
• Embedded interop types

Version 5.0

• Asynchronous members
• Caller info attributes

version 6.0

• Static imports
• Exception filters
• Auto-property initializers
• Expression bodied members
• Null propagator
• String interpolation
• nameof operator
• Index initializers

Version 7.0

• Out variables
• Tuples and deconstruction
• Pattern matching
• Local functions
• Expanded expression bodied members
• Ref locals and returns
• Discards
• Binary Literals and Digit Separators
• Throw expressions

Version 8.0

• Readonly members
• Default interface methods
• Pattern matching enhancements:
  • Switch expressions
  • Property patterns
  • Tuple patterns
  • Positional patterns
• Using declarations
• Static local functions
• Disposable ref structs
• Nullable reference types
• Asynchronous streams
• Indices and ranges
• Null-coalescing assignment
• Unmanaged constructed types
• Stackalloc in nested expressions
• Enhancement of interpolated verbatim strings

Version 9.0

• Records
• Init only setters
• Top-level statements
• Pattern matching enhancements
• Performance and interop
  • Native sized integers
  • Function pointers
  • Suppress emitting localsinit flag
• Fit and finish features
  • Target-typed new expressions
  • static anonymous functions
  • Target-typed conditional expressions
  • Covariant return types
  • Extension GetEnumerator support for foreach loops
  • Lambda discard parameters
  • Attributes on local functions
• Support for code generators
  • Module initializers
  • New features for partial methods

Angular Development Quick tips

1. create services in specific folder (like in the Shared folder)

ng g s Shared/myservice

2. use dry run mode (-d) to check the outcome before really execute the command

ng g s shared/myservice -d 

3. use --flat to skip generating the folder for the component

ng g c mycomponenet --flat

4. use $ suffix to indicate the variable is an observable

let keyup$=Observable.fromEvent(this.inputField.nativeElement, 'keyup');

5. use hashtag # to uniquely identify the elements in the template

<input type="text" #myInputField >

6. Angular provide a special class ElementRef to directly access the element.

7.  use @ViewChild to find the element in the template

@ViewChild('myInputField') myInput : ElementRef;

let inputValue=this.myInput.nativeElement;

more to come..................

How to get the name of the route the user try to navigate on canAcitvate method?

when we want to know what component the use try to access with AuthGuard enable, it is quit simple

we can put a console.log in the canActivate Method, to monitor the ActivateRouteSnapshot in Angular 9

console.log("the name of route: " + destination.routeConfig.component.name);

 

in Angular 6

you can access it from route.component.name

here is the sample code

import { Injectable } from "@angular/core";

import { CanActivate, Router, ActivatedRouteSnapshot,  

RouterStateSnapshot } from '@angular/router';

@Injectable()

export class longinGuard implements CanActivate{

    constructor(private router: Router){

    }

    canActivate(destination: ActivatedRouteSnapshot, state: RouterStateSnapshot){

        console.log("the name of route navigate to: " +

  destination.routeConfig.component.name);

  

    }

}

how to fix "project.assets.json' doesn't have a target for '.NETCoreApp,Version=v3.0"?

After I changed my target framework and rebuild it is fine, then I try to publish my solution again..

then the issue comes up immediately with the following error message.

"Severity    Code    Description    Project    File    Line    Suppression State
Error        Assets file 'C:\Users\admin\source\repos\dandotnetcore\dandotnetcore\obj\project.assets.json' doesn't have a target for '.NETCoreApp,Version=v3.0'. Ensure that restore has run and that you have included 'netcoreapp3.0' in the TargetFrameworks for your project.    dandotnetcore        0   
"

the root cause of this issue is that i had create the publish profile first, then i changed the target framework. however Visual Studio never update the target framework in the publish profile.



I had to go the publish xml file and manually update it to be netcoreapp3.1

Before

<?xml version="1.0" encoding="utf-8"?>
<!--
This file is used by the publish/package process of your Web project. You can customize the behavior of this process
by editing this MSBuild file. In order to learn more about this please visit https://go.microsoft.com/fwlink/?LinkID=208121.
-->
<Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <PropertyGroup>
    <WebPublishMethod>FileSystem</WebPublishMethod>
    <PublishProvider>FileSystem</PublishProvider>
    <LastUsedBuildConfiguration>Release</LastUsedBuildConfiguration>
    <LastUsedPlatform>Any CPU</LastUsedPlatform>
    <SiteUrlToLaunchAfterPublish />
    <LaunchSiteAfterPublish>True</LaunchSiteAfterPublish>
    <ExcludeApp_Data>False</ExcludeApp_Data>
    <ProjectGuid>d30dbc67-142e-4bb0-a07a-5abb280b4ecc</ProjectGuid>
    <publishUrl>C:\Temp\publish</publishUrl>
    <DeleteExistingFiles>True</DeleteExistingFiles>
    <TargetFramework>netcoreapp3.0</TargetFramework>
    <SelfContained>false</SelfContained>
  </PropertyGroup>
</Project>




After

<?xml version="1.0" encoding="utf-8"?>
<!--
This file is used by the publish/package process of your Web project. You can customize the behavior of this process
by editing this MSBuild file. In order to learn more about this please visit https://go.microsoft.com/fwlink/?LinkID=208121.
-->
<Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <PropertyGroup>
    <WebPublishMethod>FileSystem</WebPublishMethod>
    <PublishProvider>FileSystem</PublishProvider>
    <LastUsedBuildConfiguration>Release</LastUsedBuildConfiguration>
    <LastUsedPlatform>Any CPU</LastUsedPlatform>
    <SiteUrlToLaunchAfterPublish />
    <LaunchSiteAfterPublish>True</LaunchSiteAfterPublish>
    <ExcludeApp_Data>False</ExcludeApp_Data>
    <ProjectGuid>d30dbc67-142e-4bb0-a07a-5abb280b4ecc</ProjectGuid>
    <publishUrl>C:\Temp\publish</publishUrl>
    <DeleteExistingFiles>True</DeleteExistingFiles>
    <TargetFramework>netcoreapp3.1</TargetFramework>
    <SelfContained>false</SelfContained>
  </PropertyGroup>
</Project>

how to deploy a dotnet core web api to IIS Server?

my web api was implemented in dot.net core 3.1. i did not have to add services to the container like the previous version of Dot Net Core.

for example we have to use app.UseIISIntegration() in version 2.0

I only have to publish the project to a folder, then set up a new web site with physical path pointing to publish folder.

here is the step to set up the web site for my Dot Net Core Web API.

1. create a new application pool called DotNetCoreAppPool with No Managed Code for .net CLR version

2. create a new website and set the physical to path to publish folder and select the app pool that created in step one.

Azure New Feature Azure AD Authentication Method in Preview

I just spot a new feature in the azure portal today, after i logged into portal,  i saw a new icon (

Authentication methods - Authentication method policy (Preview)

) on the home page

after i click on the icon. it will show there are two authentication method policies available

you can click on the authentication method policy to configure the settings for each method.

How to fix the concurrent update issue in ElasticSearch with Node.js development?

if we try to update the information from two different source with ElasticSearch.


we may encounter a concurrent issue. ElasticSearch has mechanish to prevent the concurrent update.

here is the sample code to get information from bundle and book information for response.

app.put('/api/bundle/:id/book/:pgid', async(req, res)=>{

        const bundleUrl =`${url}/${req.params.id}`;

        const bookUrl=`http://${es.host}:${es.port}/${es.books_index}/book/${req.params.pgid}`;

        try{

            const [bundleRes, bookRes]=await Promise.all([

                rp({url:bundleUrl, json:true}),

                rp({url:bookUrl, json:true})

            ]);

            console.log(bundleRes);

            const {_source: bundle, _version: version}=bundleRes;

            const {_source: book}=bookRes;

            console.log("if_seq_no:",if_seq_no);

            console.log("if_primary_term", if_primary_term);

            const idx=bundle.books.findIndex(book=>book.id===req.params.pgid);

            if(idx === -1){

                bundle.books.push({

                    id: req.params.pgid,

                    title: book.title

                });

            }

            const esResBody=await rp.put({

                url:bundleUrl,

                qs:{

  version: version, 

                    version_type: 'external',

                },

                body:bundle,

                json:true

            });

            res.status(200).json(esResBody);

        }catch(esResErr){

            res.status(esResErr.status ||502).json(esResErr.error);

        }

    })

initially i try to use the version number to resolve the concurrent issue. the error is thrown immediately after the request is made.

{
    "error": {
        "root_cause": [
            {
                "type": "action_request_validation_exception",
                "reason": "Validation Failed: 1: internal versioning can not be used for optimistic concurrency control. Please use `if_seq_no` and `if_primary_term` instead;"
            }
        ],
        "type": "action_request_validation_exception",
        "reason": "Validation Failed: 1: internal versioning can not be used for optimistic concurrency control. Please use `if_seq_no` and `if_primary_term` instead;"
    },
    "status": 400
}


based on the suggestion from the error message. i need to make couple of change, in order to fix the issue.

first we need to load the _seq_no and _primary_term from bundle response body.

 const {_source: bundle, _version: version,  
 _seq_no: if_seq_no, 
 _primary_term: 
 if_primary_term }=bundleRes;

 const {_source: book}=bookRes;

second, add if_seq_no and if_primary_term to the query string array 

const esResBody=await rp.put({

                url:bundleUrl,

                qs:{

                    if_seq_no: if_seq_no,

                    if_primary_term: if_primary_term

                },

                body:bundle,

                json:true

            });

Now the concurrent issue is gone. the title update is done,

 danhuideng@DESKTOP-EE785O3:/mnt/c/node/b4$ curl -s localhost:60702/api/bundle/$BUNDLE_ID |jq '._source'
{
  "name": "far",
  "books": [
    {
      "id": "pg132",
      "title": "The Art of War"
    }
  ]
}

How to fix "The bulk request must be terminated by a newline [\\n]" issue on ElasticSearch Bulk Insert in Node.js develoopment?

i am doing a bulk insert action against the ElasticSearch with Node.js

i try to perform a bulk insert the data into index from a file.

here is the error from the action.

{
    "error": {
        "root_cause": [
            {
                "type": "illegal_argument_exception",
                "reason": "The bulk request must be terminated by a newline [\\n]"
            }
        ],
        "type": "illegal_argument_exception",
        "reason": "The bulk request must be terminated by a newline [\\n]"
    },
    "status": 400
}

the root cause of this issue is newline character is different from unix and windows

for this sample data

{"index":{"_id":"pg1"}}
{"id":1,"title":"The Declaration of Independence of the United States of America","authors":["Jefferson, Thomas"],"subjects":["United States. Declaration of Independence","United States -- History -- Revolution, 1775-1783 -- Sources"]}

in windows show as







in unix display like this

from notepad++ editor, we can easily convert it to unix format.

from edit menu, click on the EOL conversion, then select Unix(LF)

Finally we need to ensure that the data encoding is "UTF-8"

How to fix ReferenceError: function is not defined Node.js?

I just encountered an issue that function is not defined. when i checked my code. the function did exist in the script file.

ReferenceError: fullUrl is not defined
    at Command.program.command.description.action (/mnt/c/node/esclu/index.js:22:17)
    at Command.listener (/mnt/c/node/esclu/node_modules/commander/index.js:301:8)
    at Command.emit (events.js:198:13)
    at Command.parseArgs (/mnt/c/node/esclu/node_modules/commander/index.js:615:12)
    at Command.parse (/mnt/c/node/esclu/node_modules/commander/index.js:458:21)
    at Object.<anonymous> (/mnt/c/node/esclu/index.js:25:9)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)


the root cause of this issue is that the order of the defined function is really matter in Node.js

i had to move this function definition to the location after the require lines.

'use strict';

const fs=require('fs');

const request=require('request');

const program =require('commander');

const pkg=require('./package.json');

const fullUrl=(path='')=>{

    let url=`http://${program.host}:${program.port}`;

    if(program.index){

        url +=program.index +'/';

        if(program.type){

            url +=program.type +'/';

        }

    }

    return url+ path.replace(/^\/*/, '');

}

program

.version(pkg.version)

.description(pkg.description)

.usage('[options] <commander> [...]')

.option('-o, --host <hostname>','hostname [hostname]','localhost')

.option('-p, --port <number>','port number [9200]', '9200')

.option('-j, --json','format output as json')

.option('-i, --index <name>','which index to use')

.option('-t, --type <name>', 'default type for bulk opertions');

program

.command('url [path]')

.description('generate the url for the options adn apth (default is /)')

.action((path='/')=>{

    console.log(fullUrl(path));

});

program.parse(process.argv);

if(!program.args.filter(arg=> typeof arg=='object').length){

    program.help();

}

how to use Chrome DevTools to debug Node.js Code in development?

it should a very interesting topic for debugging the Node.js Code with Chrome.


1. you must have mocha package install in your node.js project.

npm install --save --save-exact mocha@2.47.5

after the installation, you will find this package in the package.json file.

"devDependencies": {

    "chai": "3.5.0",

    "mocha": "2.4.5"

  },

2. set up the test run command in the scripts section

 "scripts": {

    "test:debug": "node --inspect node_modules/mocha/bin/_mocha --watch --no-timeouts"

  },

3. execute npm run test:debug to generate a web socket that Chrome can connect to for debugging.

PS C:\node\databases> npm run test:debug

> databases@1.0.0 test:debug C:\node\databases
> node --inspect node_modules/mocha/bin/_mocha --watch --no-timeouts

Debugger listening on ws://127.0.0.1:9229/433a7d4f-e829-47e0-a4b4-d6f6f87df9f0
For help, see: https://nodejs.org/en/docs/inspector



  parseRDF
    √ should be a function
    √ should parse RDF content


  2 passing (52ms)


4. Launch the Chrome browse and navigate to Chrome//inspect, then click on "Open dedicated DevTools for Node" then click on the inspect link to launch the chrome DevTool.

5. click on the source tab, then navigate to the filesystem. click on the add folder button to add your source code folder. interesting, after you complete this step. you have to close the  DevTools window and click on the inspect link again to force the breakpoint get hitting.

you have to click on the allow button in order to your source code.

6 set a breakpoint on the source code that you want to debug, then open a new terminal in visual studio code to run touch yourJavscript.js.

7. the breakpoint will be hit immediately, you can start to step through your code and debug it.